<template>
    <div class="app-table">
        <div class="app-body">
            <div class="header flex">
                <div class="leftBox">
                    <div class="leftTitle flex">
                        <p>报名汇总</p>
                        <span>复习生管理</span>
                    </div>
                    <div class="leftCard flex">
                        <div class="leftCardLi">
                            <p class="allTotal">{{ statisticsData.NumberOfPeople }}</p>
                            <div class="cardLiBom">
                                <p>报名总人数（人）</p>
                                <img class="img1" src="../../assets/images/reviewStatisticsIcon1.png">
                            </div>
                        </div>
                        <div class="leftCardLi">
                            <p class="allTotal">{{ statisticsData.ActualNumberOfAdmissions }}</p>
                            <div class="cardLiBom">
                                <p>实录人数（人）</p>
                                <img class="img2" src="../../assets/images/reviewStatisticsIcon2.png">
                            </div>
                        </div>
                        <div class="leftCardLi">
                            <p class="allTotal">{{ statisticsData.TotalPayableAmount }}</p>
                            <div class="cardLiBom">
                                <p>收费总额（元）</p>
                                <img class="img3" src="../../assets/images/reviewStatisticsIcon3.png">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rightBox">
                    <div class="rightMain">
                        <div>
                            <p class="rightTitle">智能汇总</p>
                            <div class="xian"></div>
                        </div>
                        <p class="rightContent">模块化管理 灵活对接</p>
                    </div>
                </div>
            </div>

            <div class="mainTitle">分科报名情况</div>
            <div class="typeBox">
                <div class="course">
                    <p class="courseTitle">物化生</p>
                    <div class="pelpleBox">
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.PayAndCourseCountWHS }}</p>
                            <p class="peopleContet">缴费人数</p>
                        </div>
                        <div class="shuLine"></div>
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.payRefundCountWHS }}</p>
                            <p class="peopleContet">退费人数</p>
                        </div>
                        <div class="shuLine"></div>
                        <div class="peopleDiv">
                            <p class="peopleTotal" style="color:#FF3333;">{{ statisticsData.payCountWHS }}</p>
                            <p class="peopleContet">实录人数</p>
                        </div>
                    </div>
                    <div class="courseLine"></div>
                    <p class="courseTitle">缴费情况</p>
                    <div class="pelpleBox">
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.TotalPayableAmountWHS }}</p>
                            <p class="peopleContet">缴费金额(元)</p>
                        </div>
                        <div class="shuLine"></div>
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.totalRefundAmountWHS }}</p>
                            <p class="peopleContet">退费金额(元)</p>
                        </div>

                    </div>
                </div>
                <div class="course">
                    <p class="courseTitle">物化地</p>
                    <div class="pelpleBox">
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.PayAndCourseCountWHD }}</p>
                            <p class="peopleContet">缴费人数</p>
                        </div>
                        <div class="shuLine"></div>
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.payRefundCountWHD }}</p>
                            <p class="peopleContet">退费人数</p>
                        </div>
                        <div class="shuLine"></div>
                        <div class="peopleDiv">
                            <p class="peopleTotal" style="color:#FF3333;">{{ statisticsData.payCountWHD }}</p>
                            <p class="peopleContet">实录人数</p>
                        </div>
                    </div>
                    <div class="courseLine"></div>
                    <p class="courseTitle">缴费情况</p>
                    <div class="pelpleBox">
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.TotalPayableAmountWHD }}</p>
                            <p class="peopleContet">缴费金额(元)</p>
                        </div>
                        <div class="shuLine"></div>
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.totalRefundAmountWHD }}</p>
                            <p class="peopleContet">退费金额(元)</p>
                        </div>

                    </div>
                </div>
                <div class="course">
                    <p class="courseTitle">物化政</p>
                    <div class="pelpleBox">
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.PayAndCourseCountWHZ }}</p>
                            <p class="peopleContet">缴费人数</p>
                        </div>
                        <div class="shuLine"></div>
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.payRefundCountWHZ }}</p>
                            <p class="peopleContet">退费人数</p>
                        </div>
                        <div class="shuLine"></div>
                        <div class="peopleDiv">
                            <p class="peopleTotal" style="color:#FF3333;">{{ statisticsData.payCountWHZ }}</p>
                            <p class="peopleContet">实录人数</p>
                        </div>
                    </div>
                    <div class="courseLine"></div>
                    <p class="courseTitle">缴费情况</p>
                    <div class="pelpleBox">
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.TotalPayableAmountWHZ }}</p>
                            <p class="peopleContet">缴费金额(元)</p>
                        </div>
                        <div class="shuLine"></div>
                        <div class="peopleDiv">
                            <p class="peopleTotal">{{ statisticsData.totalRefundAmountWHZ }}</p>
                            <p class="peopleContet">退费金额(元)</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload } from "@element-plus/icons-vue";
import bottomView from "@/components/bottom.vue";
import * as echarts from 'echarts';
export default {
    name: "ReviewStudentListView",
    data() {
        return {
            type: 0,
            title: "",
            page: 1,
            pageSize: 10,
            total: 0,
            limit: 10,
            list: [],
            name: "",
            changeData: [],
            payStatus: "",
            form: {
                name: "",
            },
            statisticsData: {},

        };
    },
    components: {
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        bottomView,
        ElMessage,
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getReviewStudentList();
        // this.getEcharts()
    },
    methods: {

        exportExcel(data, fileName) {
            let link = document.createElement('a'), fileUrl = window.URL.createObjectURL(new Blob([data]));
            link.style.display = 'none';
            link.href = fileUrl;
            link.setAttribute('download', fileName + '.xlsx');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(fileUrl)
        },


        getReviewStudentList() {
            httpService(
                "/javaApi/reviewStudentForm/statistics", {}, "get"
            ).then((data) => {
                this.statisticsData = data
                this.list = [data]
                let result = []

            });
        },
    },
};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.app-table {
    background: #F5F5F5; 
    padding: 20px 15px 5px;
}


.app-body {
  
    margin-bottom: 10px;
    min-height: calc(100vh - 135px);
}

.flex {
    display: flex;
    align-items: center;
}

.header {
    align-items: start;
}

.leftBox {
    width: 58.2%;
    height: 13.2vw;
    background: url(../../assets/images/reviewStatisticsBg1.png) no-repeat;
    background-size: 100%;
    position: relative;
}

.rightBox {
    width: 30%;
    height: 13.2vw;
    flex: 1;
    background: url(../../assets/images/reviewStatisticsBg2.png) no-repeat;
    background-size: 100%;
    margin-left: 38px;
    margin-right: 20px;
}

.leftTitle {
    padding: 1.5vw 0 15px 2vw;
}

.leftTitle p {
    color: #000;
    font-size: 18px;
    font-weight: bold;
}

.leftTitle span {
    color: #666666;
    font-size: 14px;
    margin-left: 12px;
}

.leftCard {
    width: calc(100% - 4vw);
    bottom: 15px;
    position: absolute;
    padding: 0 2.5vw 0 1.5vw;
    align-items: end;
    justify-content: space-between;
}

.leftCardLi {
    width: calc((100% - 3.5vw) / 3); 
    height: 100%;
    height: 8vw;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    position: relative;
}

.allTotal { 
    padding: 1vw 0 0 1.2vw;
    color: #000; 
    font-size: min(2vw, 30px);
    font-weight: bold;
}

.cardLiBom { 
    padding: 0 1vw 0 1.5vw;
    display: flex;
    justify-content: space-between;
}

.cardLiBom p {
    color: #666;
    font-size: 16px;
    font-size: min(1vw, 16px);
    position: absolute;
    bottom: 1.5vw; 
}

.cardLiBom .img1 {
    width: 3.56vw;
    position: absolute;
    bottom: 5px;
    right: 0.7vw;
}

.cardLiBom .img2 {
    width: 3.62vw;
    position: absolute;
    bottom: 5px;
    right: 0.7vw;
}

.cardLiBom .img3 {
    width: 3.68vw;
    position: absolute;
    bottom: 5px;
    right: 0.7vw;
}


.rightMain {
    padding: 3vw 0 3vw 2vw;
}

.rightTitle {
    color: #fff;
    font-size: min(1.7vw, 24px);
}

.xian {
    width: 100px;
    width: min(5vw, 100px);
    height: 2px;
    border-radius: 1px;
    background-color: #95cffc;
    margin: 1.5vw 0 1.8vw 0;
}

.rightContent {
    color: #c2ddfd;
    font-size: min(1.4vw, 20px); 
}

.mainTitle {
    color: #000;
    font-size: 18px;
    margin: 2vw 0 1.2vw 5px;
}

.typeBox {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.course {
    width: calc((100% - 40px) / 3);
    background-color: #fff;
    border-radius: 16px;
    padding-bottom: 1vw;
}

.courseTitle { 
    padding-top: 1vw;
    color: #000;
    font-size: 22px;
    font-size: min(1.6vw, 22px);
    text-align: center;
    font-weight: bold;
}

.pelpleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2vw;
    padding-bottom: 2vw;
}

.pelpleBox .peopleDiv {
    flex: 1;
    text-align: center;
}

.shuLine {
    height: 50px;
    width: 1px;
    background-color: #E4E4E4;
}

.peopleTotal {
    color: #000;
    font-size: 26px;
    font-size: min(1.8vw, 26px);
    font-weight: bold;
}

.peopleContet {
    color: #666666;
    font-size: 16px;
    font-size: min(1.3vw, 16px);
    margin-top: 12px;
}

.courseLine {
    height: 1px !important;
    width: calc(100% - 50px);
    background-color: #E4E4E4;
    margin: 0 auto;
}
</style>
